<template>
  <div class="header-swiper">
    <swiper :options="swiperOptions">
      <swiper-slide v-for='item in swiperList'
                    :key="item.id">
        <img :src="item.imgUrl">
      </swiper-slide>

      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

export default {
  props: ['swiperList'],
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay: true,
        speed: 400,
        loop: true,
      },
    }
  }
}


</script>
<style scoped lang="stylus">
// 这么写的目的是防止网速较慢的时候出现掉块的现象
.header-swiper
  background #ccc
  height 0
  padding-bottom 26.67%
// 设置的高度为100%会出现高度问题
.header-swiper img
  width 100%
  height 2rem
.header-swiper>>>.swiper-pagination-bullet-active
  background #fff
</style>